<template>
	<view class="AllBox">
		<view style="padding: 30rpx;">
		<view class="container">
			<view	class="directory"
					:class="{ active: isActive === index }"
					v-for="(item, index) in directories":key="index"
					@touchstart="onTouchStart(index, $event)"
					@touchmove="onTouchMove(index, $event)"
					@touchend="onTouchEnd(index)">

		<view class="content"
				:style="{ transform: `translateX(${translateX[index]}px)` }">
			<view style=" width: 105%;display: flex; box-sizing: border-box;">
				<text style="font-size: 40rpx; font-weight: bold; width: 85%;">{{ item.directory_name }}</text>
				<text v-if="isShowNote[index] === 0" style="margin-right: 3%; color: grey; font-size: 16px;" @click="expandDirectory(index)">展开</text>
				<text v-if="isShowNote[index] === 1" style="margin-right: 3%; color: grey; font-size: 16px;" @click="expandDirectory(index)">收起</text>
			</view>
				<view style="margin-top: 10%;">
					<view 	class="notetitle"
						v-for="(subitem, index) in notes":key="index"
						@click="goNoteView(subitem.note_id, subitem.file)"
						@longpress="removeFromDirectory(index)">
						{{ subitem.title }}
					</view>
				</view>
        </view>
			<view class="buttons" :style="{ transform: `translateX(${translateX[index]}px)` }">
				<image class="button" @tap="handleTop(index, $event)" src='/static/tab-Icons/top.png'>置顶</image>
				<image class="button" @tap="handleRename(index, $event)" src='/static/tab-Icons/rename.png'>移动</image>
				<image class="button" @tap="handleDelete(index, $event)" src='/static/tab-Icons/delete.png'>删除</image>
			</view>
        </view>
	</view>
        <view class="noteButton1" v-if="!dirInput">
			<button style="margin-bottom: 5%;" @click="addDirectory">添加收藏夹</button>
		</view>
        <view v-else class="noteButton2" style="margin-bottom: 5%;">
			<input	v-model="InputValue"
					placeholder="请输入..."
					placeholder-style="font-style: italic"
					class="dirInput"
					@blur="blurInput"
					@confirm="onDirectory(InputValue)"/>
        </view>
      </view>
    
  </view>
</template>

<script>
import config from "@/config.js";

export default {
	data() {
		return {
			startX: 0,
			  translateX: {},
			  isActive: 999,
			  directories: [],
			  notes: [],
			  user: [],
			  dirInput: false,
			  InputValue: "",
			  maxTranslateX: -200, // 按钮总宽度，根据实际情况调整
			
			  isShowNote: [],
		  
		};
	},
	onLoad() {
		let that = this;
		that.user = uni.getStorageSync("xm-user");

		uni.request({
			url: config.baseUrl + "/directoryitem/getDirectoryitemByUserId?userId=" + that.user.id,
			method: "GET",
			success(res) {
				that.directories = res.data;
				for(let i = 0;  i< res.data.length ;i++){
					that.isShowNote.push(0);
				}
				console.log(res);
			},
		});
	},
	methods: {
		onTouchStart(index, event) {
			this.startX = event.touches[0].pageX;
			console.log("开始移动");
	  
			for(let i = 0; i < this.directories.length; i++){
				if(i !== index){
					this.translateX[i] = 0;
					this.isShowNote[i] = 0;
				}
			}
		},
		onTouchMove(index, event) {
			//console.log("正在移动");
			const moveX = event.touches[0].pageX - this.startX;
			this.isShowNote[index] = 2;
			this.notes = [];
			this.isActive = 999;
			if (moveX < 0 && moveX > this.maxTranslateX) {
				this.$set(this.translateX, index, moveX);
			} else if (moveX > 0 && this.translateX[index] < 0) {
				this.$set(this.translateX, index, Math.min(0, this.maxTranslateX + moveX));
			}
			// 阻止事件传播，避免触发点击事件
    
		},
		onTouchEnd(index) {
			console.log("结束移动");
			if (this.translateX[index] < this.maxTranslateX / 2) {
			  this.$set(this.translateX, index, this.maxTranslateX);
			} else {
				if(this.isShowNote[index] !== 1) {
					this.isShowNote[index] = 0
				}
				this.$set(this.translateX, index, 0);
			}
		},
		expandDirectory(query) {
			let that = this;
	  
	  
			for(let i = 0; i < that.isShowNote.length; i++) {
		  
				if( i  === query){
					if(that.isShowNote[query] === 0){
						that.isShowNote[query] = 1 
					}
				else if(that.isShowNote[query] === 1){
					that.isShowNote[query] = 0
				}
				} else {
					that.isShowNote[i] = 0;
				}
	  	
			}
	  
			if (this.isActive === query) {
				this.isActive = 999;
			}
            else {this.isActive = query;}

			uni.request({
				url: config.baseUrl +"/directoryitem/GetNote?directoryId=" + this.directories[query].directory_id, //对接接口
				method: "GET",

				success(res){
					that.notes = res.data;
				},
			});
		},

		deleteDirectory(index) {
			let that = this;
			uni.showModal({
				title: "提示",
				content: "是否删除所选目录",
				success(res) {
					if (res.confirm) {
						uni.request({
							url: config.baseUrl + "/directoryitem/deleteByDirectoryId?directoryId=" + that.directories[index].directory_id,
							method: "DELETE",
				
							success(res){
								console.log(that.directories[index]);
								that.directories.splice(index, 1);
								uni.showToast({
									icon: "success",
									title: "删除成功",
									duration: 800,
								});
								console.log('删除成功！')
							},
						});
					}
				},
			});
		},

		goNoteView(noteId, fileName) {
			uni.navigateTo({
				url: "/pages/noteView/noteView?noteId=" + noteId + "&FileName=" + fileName,
			});
		},

		removeFromDirectory(index) {
			let that = this;
			uni.showModal({
				title: "提示",
				content: "是否移除所选笔记",
				success(res) {
					if (res.confirm) {
						uni.request({
							url: config.baseUrl + '/directory/deleteByNoteId?noteId=' + that.notes[index].note_id,
							method: "DELETE",
		
							success(res) {
								that.notes.splice(index, 1);
								uni.showToast({
									icon: "success",
									title: "删除成功",
									duration: 800,
								});
							},
						});
					}
				},
			});
		},

		addDirectory() {
			this.dirInput = true;
		},

		blurInput() {
			this.dirInput = false;
			this.InputValue = "";
		},

		onDirectory() {
			let that = this;
			if (this.InputValue !== "") {
				let form0 = {
					directory_name: this.InputValue,
					user_id: that.user.id,
				};

				let form = JSON.parse(JSON.stringify(form0));

				uni.request({
					url: config.baseUrl + "/directoryitem/Insert",
					method: "POST",
					data: form,
					
					success(res){
						uni.request({
							url: config.baseUrl + "/directoryitem/getDirectoryitemByUserId?userId=" + that.user.id,
							method: "GET",
							success(res) {
								that.directories = res.data;
								for(let i = 0;  i< res.data.length ;i++){
									that.isShowNote.push(0);
								}
								console.log(res);
							},
						});
					}
				});
				that.saveDirectory(that.InputValue);
			}
		},

		saveDirectory(query) {
			this.dirInput = false;
			if (query !== "") {
			
			}
		},

		handleTop(index, event) {
			// 处理置顶事件
			console.log("点击了置顶按钮");
			
			event.stopPropagation(); // 阻止事件冒泡
		},
		
		handleRename(index, event) {
			console.log("点击了重命名按钮");
			
			let that = this;
			uni.showModal({
			    title: '重命名',
				placeholderText:'收藏夹名称',
				content:'',
			    editable: true,
				
				success(res){
					if(res.confirm){
						let form0 = {
							directory_id: that.directories[index].directory_id,
							directory_name: res.content,
							user_id: that.user.id
						};
						
						
						let form = JSON.parse(JSON.stringify(form0));
						console.log(form);
						
						uni.request({
							url: config.baseUrl + '/directoryitem/Update',
							data:form,
							method:"POST",
							
							success(res){
								that.translateX[index] = 0;
								that.isShowNote[index] = 0;
								
								that.directories[index].directory_name = form.directory_name
								that.directories[index].directory_id = form.directory_id;
								
								console.log('重命名成功!');
							}
						})
					}
				}
			})
			
			event.stopPropagation(); // 阻止事件冒泡
		},
		
		handleDelete(index, event) {
			// 处理删除事件
			console.log("点击了删除按钮");
			this.deleteDirectory(index);
			
			//防止下一个目录自动左滑
			this.translateX[index] = 0;
			this.isShowNote[index] = 0;
			
			event.stopPropagation(); // 阻止事件冒泡
		}
	},
};
</script>

<style scoped>
	.AllBox{
		background-color: white;
		padding: 10rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		 overflow-y: auto;
		height: 650px;
	}
	
	.directory {
		position: relative; 
		background-color: white;
		padding: 50rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
		margin-bottom: 5.2%;
		height: 28px;
		overflow: hidden;
		z-index: 1;
	}

	.directory.active {
		overflow: auto;
		height: 100%;
	}

	.invisible-button {
		background-color: aqua;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 40%; /* 仅覆盖directory左半部分 */
		z-index: 2; /* 确保隐形按钮在最上层 */
	}

	.notetitle {
		background-color: aliceblue;
		margin-bottom: 2%;
		padding: 10px;
		border-radius: 5px;
	}

	.title {
		font-weight: bold;
	}

	.summary {
		margin-top: 5px;
		color: #666;
	}

	.noteButton1 {
		position: fixed;
		bottom: 0;
		width: 90%;
	}
	
	.noteButton2{
		position: fixed;
		bottom: 0;
		width: 90%;
		background-color: white;
	}

	.dirInput {
		font-size: 35rpx;
		padding: 10px;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		border-radius: 20rpx;
		width: 95%;
	}

	.content,
	.buttons {
		transition: transform 0.3s ease;
	}

	.buttons {
		display: flex;
		flex-direction: row;
		width: 200px; /* 按钮总宽度 */
		position: absolute;
		right: -200px; /* 调整按钮的位置 */
		top: 0;
		bottom: 0;
		z-index: 0;
		background-color: #fff; /* 给按钮区域设置背景色 */
	}

	.button {
		width: 50px; /* 确保宽度和高度相等 */
		height: 50px; /* 确保宽度和高度相等 */
		margin: 5px; /* 给按钮间距 */
		margin-top: 15px;
		margin-right: 5px;
		text-align: center;
		line-height: 60px; /* 垂直居中文本 */
		color: #fff;
		border-radius: 50%; /* 圆形按钮 */
		background-color: aliceblue; /* 按钮背景色 */
		font-size: 14px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
	}
</style>


